<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="time" label="类型/时间">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<div class="flex items-center text-16px mb-10px">
							<div v-if="scope.row.methods === 'pay'" class="text-#07B175">
								购买
							</div>
							<div v-if="scope.row.methods === 'sell'" class="text-#07B175">
								出售
							</div>
							<div class="ml-10px">{{ scope.row.coin }}</div>
						</div>
						<div class="text-#86909C text-12px">
							{{ scope.row.time }}
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="order" label="订单号" >
				<template #default="scope">
					<div class="flex items-center">
						<p class="text-12px">{{ scope.row.order }}</p>
						<img src="/transaction/spot/copy.svg" class="w-16px h-16px ml-10px">
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格" />
			<el-table-column prop="legal" label="法币/加密货币金额">
				<template #default="scope">
					<div>
						<p class="text-12px">{{ scope.row.legal }}</p>
						<p class="text-12px">{{ scope.row.coinSum }}</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="ad" label="广告方">
				<template #default="scope">
					<div>
						<p class="text-12px mb-4px">
							{{ scope.row.ad }}
						</p>
						<el-button color="#114CEE" style="width:70px;height:30px;color:#fff;font-size: 12px;">
							在线聊天
						</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" align="right">
				<template #default="scope">
					<div class="flex justify-end">
						<p class="w-50px border-b-1px border-dashed border-#000000">
							{{ scope.row.status }}
						</p>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref<any[]>([
	{
		methods: 'pay',
		coin: 'USDT',
		time: '2023-04-02 12:00',
		order: '232535622562562',
		price: '6.96 CNY',
		legal: '100 CNY',
		coinSum: '100 USDT',
		ad: '夏天',
		status: '已取消'
	},
	{
		methods: 'pay',
		coin: 'USDT',
		time: '2023-04-02 12:00',
		order: '232535622562562',
		price: '6.96 CNY',
		legal: '100 CNY',
		coinSum: '100 USDT',
		ad: '夏天',
		status: '已取消'
	},
	{
		methods: 'pay',
		coin: 'USDT',
		time: '2023-04-02 12:00',
		order: '232535622562562',
		price: '6.96 CNY',
		legal: '100 CNY',
		coinSum: '100 USDT',
		ad: '夏天',
		status: '已付款'
	}
])
</script>
